<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS 动画 - 动画时长</title>
  <style>
    body {
      padding: 0 40px;
      color: #333;
    }

    .box {
      width: 200px;
      height: 150px;
      background-color: pink;

      /* 复合语法 */
      /* animation: move 10s; */

      /* 单一语法 */
      animation-name: move; /* 指定动画序列名称 */
      animation-duration: 10s; /* 指定动画序列持续时间 */
    }

    /* 动画序列中的帧使用的百分比是以 动画时长为参考 */

    /* 定义动画序列 */
    @keyframes move {
      /* 相当于 0% */
      from {}

      20% {
        width: 400px;
      }

      40% {
        width: 400px;
        height: 300px;
      }

      60% {
        width: 400px;
        height: 300px;
        background-color: red;
      }

      80% {
        width: 400px;
        height: 300px;
        background-color: red;
        transform: rotate(360deg);
      }

      /* 100% */
      to {}
    }

    @keyframes chnage {

    }

  </style>
</head>
<body>
   <h3>动画时长</h3>
   <p>设置整个动画持续的时长，以秒计。</p>

   <div class="box"></div>
</body>
</html>